<template>
    <div class="my-r-top">
        <p class="font-medium text-2xl">{{ title }}</p>
    </div>
    <!--    图方便,直接用tailwind编写css-->
    <div class="border mb-4">
        <div class="flex px-4 py-2 hover:bg-gray-200 grid grid-cols-8 items-center cursor-pointer border-t">
            <div class="col-span-6 flex items-center">
                <n-badge value="999+">
                    <n-avatar size="48" :src="'https://p2.music.126.net/MdPj3m8Z8YQqIkjoKa-Uyg==/1404076351898468.jpg' + '?param=48y48'" class="border"></n-avatar>
                </n-badge>
                <div class="ml-8">
                    <p>电台名字</p>
                    <p class="radio-ar-name">by电台作者</p>
                </div>
            </div>
            <div>
                <span class="hover:text-red-600">删除</span>
                <span class="mx-4">|</span>
                <span class="hover:text-red-600">分享</span>
            </div>
            <div class="col-span-1">
                <p>第几期</p>
            </div>
        </div>
    
        <div class="flex px-4 py-2 hover:bg-gray-200 grid grid-cols-8 items-center cursor-pointer border-t">
            <div class="col-span-6 flex items-center">
                <n-badge value="999+">
                    <n-avatar size="48" :src="'https://p2.music.126.net/MdPj3m8Z8YQqIkjoKa-Uyg==/1404076351898468.jpg' + '?param=48y48'" class="border"></n-avatar>
                </n-badge>
                <div class="ml-8">
                    <p>电台名字</p>
                    <p class="radio-ar-name">by电台作者</p>
                </div>
            </div>
            <div>
                <span class="hover:text-red-600">删除</span>
                <span class="mx-4">|</span>
                <span class="hover:text-red-600">分享</span>
            </div>
            <div class="col-span-1">
                <p>第几期</p>
            </div>
        </div>
    </div>
</template>

<script>
import {NAvatar, NBadge} from 'naive-ui';
export default {
    name: "MyRadio",
    props: {
        title: {
            type: String,
            default: ''
        }
    },
    setup() {
        const TAG = "MyRadio.vue";
    },
    components: {
        NAvatar,
        NBadge
    }
}
</script>

<style scoped lang="scss">
.my-r-top {
    border-bottom: 2px solid #c20c0c;
    
}
.radio-ar-name {
    @apply text-xs mt-1;
    color: #999999;
}
</style>